Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Don't touch the DOM unless a style has actually changed #9

Merged
merged 1 commit into from
Mar 20, 2021

Conversation

dhleong
Copy link
Owner

@dhleong dhleong commented Mar 19, 2021

I noticed that when using a spade defattr on an item within a
virtualized list, scroll performance got a bit janky. Other virtualized
list components performed just fine, so I dove into the profiler to see
what was going on.

It turns out that each call to the defattr function was touching the
dom, even though its params weren't changed. The reason I wasn't running
into this with other virtualized lists was that they were styling their
children at a higher level, so the function was only called once.

So, this change will only touch the dom if the underlying style has
actually changed. Since Spade encourages small styles, this comparison
should be fast enough---and certainly faster than updating the DOM---but
if anyone discovers performance issues we might be able to assume that
in production, any given style function, when provided the same
parameters, will always produce the same CSS, and thus skip updates
entirely in production, while keeping the current behavior for testing
styles with hot reload in dev mode.

I noticed that when using a spade defattr on an item within a
virtualized list, scroll performance got a bit janky. Other virtualized
list components performed just fine, so I dove into the profiler to see
what was going on.

It turns out that each call to the defattr function was touching the
dom, even though its params weren't changed. The reason I wasn't running
into this with other virtualized lists was that they were styling their
children at a higher level, so the function was only called once.

So, this change will only touch the dom if the underlying style has
actually changed. Since Spade encourages small styles, this comparison
should be fast enough---and certainly faster than updating the DOM---but
if anyone discovers performance issues we might be able to assume that
in production, any given style function, when provided the same
parameters, will always produce the same CSS, and thus skip updates
entirely in production, while keeping the current behavior for testing
styles with hot reload in dev mode.
@dhleong dhleong merged commit 2abc311 into master Mar 20, 2021
@dhleong dhleong deleted the dhleong/optimize-style-updates branch March 20, 2021 14:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant